import 'package:flutter/material.dart';
import 'package:flutter_demo/main02-2.dart';
import 'package:flutter_demo/main02-3.dart';
import 'package:flutter_demo/main02.dart';

///runApp接受指定的控件(Widget),并作为控件树的根控件
///Center控件使子控件处于中间位置,
///Text控件打印文本内容
///
/// 基本控件:
/// Text,文本控件,在应用中创建各种样式的文本
/// Row,Column:Flex控件,可以创建水平(Row)或者垂直(Column)方向的布局
/// ,是基于Web的flexBox的布局模式设计的(相当于TableLayout)
/// Stack 非线性布局,控件可以堆叠在其他控件上,可以使用Positioned控制Stack相对顶部,右部,底部和左部的位置
/// ,是基于Web的absolute定位布局模式设计的(相当于FrameLayout)
/// *重要 Container 创建矩形的可视元素,可以用BoxDecoration来设计样式,比如背景,边框和阴影,Container有边距
/// ,填充和大小限制(相当于div)
void main() => runApp(MaterialApp(
      title: 'Flutter教程',
      // home: MyScaffold(),//01
      // home: Home(),//02
      // home: MyButton(),02-2
      home: Counter(),
    ));

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: <Widget>[
          MyAppBar(
            title: Text(
              '实例标题',
              style: Theme.of(context).primaryTextTheme.title,
            ),
          ),
          Expanded(
            child: Center(
              child: Text('你好,世界'),
            ),
          )
        ],
      ),
    );
  }
}

class MyAppBar extends StatelessWidget {
  MyAppBar({this.title});

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56,
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(color: Colors.blue[500]),
      child: Row(
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            tooltip: '导航菜单',
            onPressed: null,
          ),
          Expanded(
            child: title,
          ),
          IconButton(
            icon: Icon(Icons.search),
            tooltip: '搜索',
            onPressed: null,
          )
        ],
      ),
    );
  }
}
